<h2>Why is this an issue?</h2>
<p>Captions in HTML media elements are text versions of the audio content, synchronized with the video. They are essential for individuals who are
deaf or hard of hearing, as they provide a text alternative for the audio information. They can also be beneficial for individuals who are not native
speakers of the language of the video, or for situations where the audio cannot be heard.</p>
<p>In the context of accessibility, providing captions for media elements is a requirement under the Web Content Accessibility Guidelines (WCAG).
Without captions, you are excluding a portion of your audience who rely on them to understand the content of your media.</p>
<h2>How to fix it</h2>
<p>If captions are missing from your media elements, you can fix this by adding a <code>&lt;track&gt;</code> element with the
<code>kind="captions"</code> attribute inside your <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> element. However, for video elements that
have the <code>muted</code> attribute, captions are not required.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
&lt;audio {...props} /&gt;; // Noncompliant
&lt;video {...props} /&gt;; // Noncompliant
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
&lt;audio&gt;&lt;track kind="captions" {...props} /&gt;&lt;/audio&gt;
&lt;video&gt;&lt;track kind="captions" {...props} /&gt;&lt;/video&gt;
&lt;video muted {...props} &gt;&lt;/video&gt;
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/media-has-caption.md">media-has-caption</a> </li>
  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio">audio element</a> </li>
  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">video element</a> </li>
  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track">track element</a> </li>
  <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html">Captions</a> </li>
  <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded.html">Audio Description or Media
  Alternative</a> </li>
</ul>
